<template>
  <div class="alg-event bg-gray h-100P flex-column">
    <div class="head flex bg-white">
      <el-button type="text" @click="$router.back()">
        <i class="el-icon-arrow-left fw-600"></i>
      </el-button>
      <div class="fz-14">
        <div>
          <span class="main-title">事件详情</span>
          <span class="third-title mg-left-40">来源：{{ eventData.abilityTypeName }}</span>
        </div>
        <div class="top-20 third-title">事件编号：{{ eventData.id }}</div>
      </div>
    </div>
    <div class="content top-10 flex-sub bg-white flex">
      <div class="map-content h-100P">
        <Map :eventData="eventData" :imgUrl="imgUrl" :imgLocationVo="imgLocationVo"></Map>
      </div>
      <div class="detail-msg h-100P flex-sub">
        <event-detail :eventData="eventData" @picture="showPicture"></event-detail>
      </div>
    </div>
  </div>
</template>

<script>
import Map from './components/map'
import EventDetail from './components/event-detail'
import { apiFindAlgEventById } from './api'

export default {
  name: 'AlgEvent',
  components: { Map, EventDetail },
  data() {
    return {
      eventId: '',
      eventData: {},
      imgUrl: '',
      imgLocationVo: {},
    }
  },
  created() {
    this.eventId = this.$route.query.eventId
    this.initData()
  },
  methods: {
    showPicture(row) {
      console.log(row)
      this.imgLocationVo = { remarkName: row.deviceVo.remarkName, ...row.deviceVo.locationVo }
      this.imgUrl = row.fileId
    },
    initData() {
      this.findAlgEventById()
    },
    async findAlgEventById() {
      this.eventData = await apiFindAlgEventById(this.eventId)
    },
  },
}
</script>

<style scoped lang="scss">
.alg-event {
  background-color: #f3f4f8;

  .top-20 {
    margin-top: vw(20px);
  }

  .top-10 {
    margin-top: vw(10px);
  }

  .head {
    padding: vw(20px);
    background-color: white;
  }

  .content {
    padding: vw(20px);
    background-color: white;

    .map-content {
      width: 60%;

      .legend {
        padding: 14px 20px 12px 20px;
        border-radius: 4px;
        box-shadow: -1px 0 4px 0 rgba(29, 29, 29, 0.15);
      }
    }
  }
}
</style>
